<template>
  <q-dialog v-model="visible" persistent>
    <q-card>
      <q-card-section
        class="text-h6"
        :class="$q.dark.isActive ? '' : 'text-black'"
      >
        {{ props.createNew ? $t(lang + "text1") : $t(lang + "text2")
        }}{{ $t(lang + "text3") }}
        <q-btn
          icon="close"
          dense
          flat
          round
          v-close-popup
          class="float-right"
        />
      </q-card-section>
      <q-separator />
      <q-form @submit="create">
        <q-card-section>
          <q-input
            v-model="userData.username"
            :label="$t(lang + 'text4')"
            outlined
            dense
            lazy-rules
            :rules="[(val) => (val && val.length > 0) || $t(lang + 'text5')]"
          />
          <q-input
            v-model="userData.phone"
            :label="$t(lang + 'text6')"
            type="tel"
            outlined
            dense
            lazy-rules
            class="q-mb-lg"
          />
          <q-input
            v-model="userData.email"
            :label="$t(lang + 'text7')"
            type="email"
            outlined
            dense
            lazy-rules
            class="q-mb-lg"
          />
          <q-select
            :label="$t(lang + 'text8')"
            v-if="
              createNew || userData.role === 'admin' || userData.role === 'root'
            "
            outlined
            dense
            map-options
            emit-value
            v-model="userData.role"
            :options="options"
            class="q-mb-lg"
          >
          </q-select>
          <q-input
            v-model="userData.password"
            :label="$t(lang + 'text9')"
            outlined
            dense
            lazy-rules
            :rules="[(val) => (val && val.length > 0) || $t(lang + 'text10')]"
            :type="isPwd ? 'password' : 'text'"
          >
            <template v-slot:append>
              <q-icon
                :name="isPwd ? 'visibility_off' : 'visibility'"
                class="cursor-pointer"
                @click="isPwd = !isPwd"
              />
            </template>
          </q-input>
          <q-input
            v-model="repeatPwd"
            :label="$t(lang + 'text11')"
            outlined
            dense
            :rules="[
              (val) =>
                (val && val === userData.password) || $t(lang + 'text12'),
            ]"
            :type="isPwd ? 'password' : 'text'"
          >
            <template v-slot:append>
              <q-icon
                :name="isPwd ? 'visibility_off' : 'visibility'"
                class="cursor-pointer"
                @click="isPwd = !isPwd"
              />
            </template>
          </q-input>
        </q-card-section>
        <q-separator />
        <q-slide-transition>
          <div class="bg-primary">
            <q-btn
              no-caps
              unelevated
              class="full-width text-subtitle1 text-bold"
              color="primary"
              :label="
                createNew
                  ? $t(lang + 'text1')
                  : $t(lang + 'text2') + $t(lang + 'text13')
              "
              type="submit"
            />
          </div>
        </q-slide-transition>
      </q-form>
    </q-card>
  </q-dialog>
</template>

<script setup>
import { useQuasar } from "quasar";
import { ref } from "vue";
import { useAPIStore } from "stores/api";
import { useI18n } from "vue-i18n";
import { userApi } from "boot/axios";

const t = useI18n().t;
const lang = "userIndex.CreateUser.";
const $q = useQuasar();
const options = [
  { label: t(lang + "text14"), value: "user" },
  { label: t(lang + "text15"), value: "admin" },
];
// 这些属性代表着组件从父组件接收到的数据
const props = defineProps({
  createNew: { type: Boolean, default: false },
});
// defineEmits用于声明组件的自定义事件
const emit = defineEmits(["refresh", "conceal"]);
const visible = ref(false);
// 是否显示密码
const isPwd = ref(true);
// 用户对象
const userData = ref({
  username: "",
  phone: "",
  email: "",
  password: "",
  role: "user",
});
// 第二次密码
const repeatPwd = ref("");
// 创建用户
function create() {
  userApi
    .post(useAPIStore().centerUrl + "user", userData.value)
    .then((res) => {
      if (res.data) {
        $q.notify({
          type: "positive",
          message: props.createNew ? t(lang + "text16") : t(lang + "text17"),
        });
        // 重新获取用户信息
        emit("refresh");
        visible.value = false;
      } else {
        $q.notify({ type: "warning", message: t(lang + "text18") });
      }
    })
    .catch(() => {
      $q.notify({ type: "warning", message: t(lang + "text19") });
    });
}
function show() {
  visible.value = true;
}
defineExpose({ show });
</script>

<style scoped></style>
